<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">主子表Demo</block></cu-custom>
		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<view :hidden="TabCur==1">
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">单行文本</view>
				<input placeholder="请输入内容" name="input" v-model="testInput"></input>
			</view>
			<view class="cu-form-group align-start" :hidden="textareaShow == false">
				<view class="title">文本框</view>
				<textarea v-model="testTextarea" maxlength="-1" placeholder="多行文本输入框"></textarea>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">单选</view>
				<js-radio dict="sys_menu_type" v-model="testRadio"></js-radio>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">多选</view>
			</view>
			<js-checkbox dict="sys_menu_type" v-model="testCheckbox"></js-checkbox>
			<view class="cu-form-group" @tap="$refs['testDate'].show();">
				<view class="title">日期时间 : </view>
				<input placeholder="" name="input" v-model="testDate" disabled="true"></input>
				<text class='cuIcon-time text-green'></text>
				<w-picker mode="dateTime" :defaultVal="testDate" v-model="testDate"
				ref="testDate" >
				</w-picker>
			</view>
			<view class="cu-form-group align-start" 
			@tap.stop="textareaShow = false;$refs.userTree.__show(user.result)">
				<view class="title" style="height:auto;">用户选择 : {{user.userName || ''}}</view>
			</view>
			<js-tree ref="userTree" type="user" url="/a/sys/office/treeData?isLoadUser=true" loadAll="true" 
				title="人员选择" icon="cuIcon-people"></js-tree>
			<view class="cu-form-group align-start" @tap.stop="textareaShow = false;$refs.orgTree.__show(org.result)">
				<view class="title">组织机构选择 : {{org.name || ''}}</view>
			</view>	
			<js-tree ref="orgTree" type="org" url="/a/sys/office/treeData"
				title="组织选择" icon="cuIcon-group_fill"></js-tree>
			<view class="cu-form-group align-start" @tap.stop="textareaShow = false;$refs.addressTree.__show(address.result)">
				<view class="title">地址选择 : {{address.name || ''}}</view>
			</view>	
			<js-tree ref="addressTree" type="address" url="/a/sys/area/treeData"
				title="地址选择" icon="cuIcon-locationfill"></js-tree>
			<js-images @addOrDel="addOrDelImage" bizType="testData_image"></js-images>
			<js-file @addOrDel="addOrDelFile" bizType="testData_image"></js-file>
			<view ref="input" class="input"></view>
			<view style="height:100px" class="bg-white"></view>
			<button class="bg-blue margin-top" @click="save" id="save">保存</button>
		</form>
		</view>
		<view :hidden="TabCur==0">
			<view class="cu-form-group margin-top">
				<view class="title">单行文本</view>
				<input placeholder="请输入内容" name="input" @input="subChange($event.target.value, 'testInput')" v-model="testInputSub"></input>
			</view>
			<view class="cu-form-group align-start" :hidden="textareaShow == false">
				<view class="title">多行文本</view>
				<textarea v-model="testTextareaSub" @input="subChange($event.target.value,'testTextarea')" maxlength="-1" placeholder="多行文本输入框"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">单选框</view>
				<js-radio dict="sys_menu_type" @input="subChange($event.target.value,'testRadio')" v-model="testRadioSub"></js-radio>
			</view>
			<view class="cu-form-group">
				<view class="title">多选框</view>
			</view>
			<view>
				<js-checkbox dict="sys_menu_type" @input="subChange($event.target.value,'testCheckbox')" v-model="testCheckboxSub"></js-checkbox>
			</view>
			<view class="cu-form-group" @tap="toggleTab('sDate')">
				<view class="title">日期选择 : </view>
				<input placeholder="" name="input" v-model="testDateSub" disabled="true"></input>
				<text class='cuIcon-time text-green'></text>
				<w-picker mode="date" :defaultVal="testDateSub" v-model="testDateSub"
				 ref="sDate"></w-picker>
			</view>
			<view class="cu-form-group" @tap="mode = 'sDateTime';$refs['sDateTime'].show();">
				<view class="title">时间选择 : </view>
				<input placeholder="" name="input" v-model="testDateTimeSub" disabled="true"></input>
				<text class='cuIcon-time text-green'></text>
				<w-picker mode="dateTime" :defaultVal="testDateTimeSub" v-model="testDateTimeSub"
				ref="sDateTime"></w-picker>
			</view>
			<view class="cu-form-group" @tap.stop="this.$refs.userList.__show(userlistChoseStr)">
				<view class="title" style="height:auto;">用户选择: {{userlistChoseStrName}}</view>
			</view>
			<js-list ref="userList" type="userList" url="/a/sys/empUser/listData" :field="userListField" 
				icon="cuIcon-my text-grey" plache="请输入姓名" search="refName"></js-list>
			<view class="cu-form-group align-start" @tap.stop="textareaShow = false;$refs.orgSubTree.__show(orgSub.result)">
				<view class="title">组织机构选择 : {{orgSub.name || ''}}</view>
			</view>
			<js-tree ref="orgSubTree"  type="orgSub" url="/a/sys/office/treeData"
				title="组织选择" icon="cuIcon-group_fill"></js-tree>
			<view class="cu-form-group align-start" @tap.stop="textareaShow = false;$refs.addressSubTree.__show(addressSub.result)">
				<view class="title">地址选择 : {{addressSub.name || ''}}</view>
			</view>	
			<js-tree ref="addressSubTree" type="addressSub" url="/a/sys/area/treeData"
				title="地址选择" icon="cuIcon-locationfill"></js-tree>
			<view class="cu-form-group">
				
			</view>
			<view class="cu-form-group" id="bottom">
				<button class="cu-btn bg-red shadow" @tap="delItem">删除</button>
				<view>{{currentPage}} / {{allPage}}</view>
				<button class="cu-btn bg-green shadow" @tap="pageUp">上一项</button>
				<button class="cu-btn bg-blue shadow" @tap="pageDown">下一项</button>
			</view>
		</view>
		<!--下面放底部弹出类-->
		<tki-tree ref="orgTreeSub" @cancel="textareaShow = true" @treeCallBack="fconfirm" confirmColor="#f5a200" type="orgSub" range-key="label" title="组织机构选择" titleColor="#f5a200" url="/a/sys/office/treeData"/>
		<js-tree></js-tree>
		
		
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import {dateUtils} from '../../../common/js/util.js'
	export default {
		data() {
			return {
				tabNav: ['主表', '子表'],
				TabCur: 0,
				CustomBar: this.CustomBar,
				treeData:[],
				// 解决textarea层级过高的问题
				textareaShow:true,
				// 解决picker当前是哪一个
				mode:"",
				// 表单需要的数据
				testInput:"",
				testTextarea:"",
				testRadio:"",
				testCheckbox:"",
				testDate: dateUtils.getCurrentDateTime(),
				user:{},
				
				org:{},
				orgSub:{},
				address:{},
				addressSub:{},
				region: ['广东省', '广州市', '海珠区'],
				sRegion: ['广东省', '广州市', '海珠区'],
				testData_image:"",
				testData_image_del:"",
				testData_file:"",
				testData_file_del:"",
				
				// 子项列表
				subList:[],
				
				
				// extra
				userlistChoseStr: "",
				userlistChoseStrName: "",
				userlistChose:[],
				userListField:[{
					type: "field",
					field: "refName"
				},
				{
					type: "string",
					field: "("
				},{
					type: "field",
					field: "loginCode"
				},{
					type: "string",
					field: ")"
				},{
					type: "string",
					field: " | "
				},{
					type: "field",
					deep: 3,
					field: ["refObj","office","fullName"]
				}],
				currentPage: 0,
				allPage: 0,
				// 子表temp
				testInputSub: "",
				testTextareaSub: "",
				testRadioSub: "",
				testCheckboxSub: "",
				testDateSub: dateUtils.getCurrentDate(),
				testDateTimeSub: dateUtils.getCurrentDateTime()
			};
		},
		mounted() {
			// 初始化
		},
		computed:{
			// 地址用空格隔开
			regionStr(){
				return this.region.join(" ");
			},
			// 地址用空格隔开 子表
			regionSubStr(){
				return this.sRegion.join(" ");
			}
		},
		watch:{
			allPage(val, oldVal){
				console.log("change")
				if(val > oldVal){
					this.subList.push({userList:[],testAreaName:[]});
				}
			}
		},
		methods: {
			...mapActions(["JAjax"]),
			// 触发日期选择和地址选择弹出
			toggleTab(str){
				this.mode = str;
				this.$refs[str].show();
			},
			// 日期时间和地址确定选择
			onConfirm(value){
				console.log(this.mode)
				if(this.mode == "dateTime"){
					this.testDate = value.result;
				}
				if(this.mode == "region"){
					this.region = value.checkArr;
				}
			},
			// 日期时间和地址确定选择 (子项)
			onConfirmS(value){
				if(this.mode == "sDateTime"){
					this.subChange(value.result,"testDateTime")
					this.testDateTimeSub = value.result;
				}
				if(this.mode == "sDate"){
					this.subChange(value.result,"testDate")
					this.testDateSub = value.result;
				}
				if(this.mode == "sRegion"){
					this.sRegion = value.checkArr;
					this.subChange(this.regionSubStr,"testAreaName")
				}
			},
			// 添加或删除图片
			addOrDelImage(val){
				this.testData_image = val.normal.join(",");
				this.testData_image_del = val.del.join(",");
			},
			// 添加或删除附件
			addOrDelFile(val){
				this.testData_file = val.normal.join(",");
				this.testData_file_del = val.del.join(",");
			},
			// 主子表选择
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if(this.TabCur == 1 && this.allPage == 0){
					this.currentPage = 1;
					this.allPage = 1;
				}
			},
			// 树确定选择
			treeselectCallback(type, arr){
				this.textareaShow = true;
				if(type == 'user'){
					if(arr instanceof Array){
						
						let userName = [];
						let userCode = [];
						let result = [];
						
						arr.forEach((val, ind)=>{
							userName.push(val.name)
							userCode.push(val.id.replace("u_",""))
							result.push({name: val.name, id: val.id});
						})
						this.$set(this.user,'userName', userName.join(","));
						this.$set(this.user,'userCode', userCode.join(","));
						this.$set(this.user,'result', result);
					} else if(arr instanceof Object){
						this.$set(this.user,'userName', arr.name);
						this.$set(this.user,'userCode', arr.id.replace("u_",""));
						this.$set(this.user,'result', {name: arr.name, id: arr.id});
					} else {
						this.$set(this.user,'userName', "");
						this.$set(this.user,'userCode', "");
						this.$set(this.user,'result', "");
					}
				}
				if(type == 'org'){
					if(arr instanceof Array){
						
						let name = [];
						let code = [];
						let result = [];
						
						arr.forEach((val, ind)=>{
							name.push(val.name)
							code.push(val.id)
							result.push({id:val.id, name:val.name})
						})
						this.$set(this.org,'name', name.join(","));
						this.$set(this.org,'code', code.join(","));
						this.$set(this.org,'result', result);
					} else if(arr instanceof Object){
						this.$set(this.org,'name', arr.name);
						this.$set(this.org,'code', arr.id);
						this.$set(this.org,'result', {id:arr.id, name:arr.name});
					} else {
						this.$set(this.org,'name', "");
						this.$set(this.org,'code', "");
						this.$set(this.org,'result', "");
					}
				}
				if(type == 'orgSub'){
					if(arr instanceof Array){
						
						let name = [];
						let code = [];
						let result = [];
						
						arr.forEach((val, ind)=>{
							name.push(val.name)
							code.push(val.id)
							result.push({id:val.id, name:val.name})
						})
						this.$set(this.orgSub,'name', name.join(","));
						this.$set(this.orgSub,'code', code.join(","));
						this.$set(this.orgSub,'result', result);
						this.$set(this.subList[this.currentPage-1], "org", arr);
					} else if(arr instanceof Object){
						this.$set(this.orgSub,'name', arr.name);
						this.$set(this.orgSub,'code', arr.id);
						this.$set(this.orgSub,'result', {id:arr.id, name:arr.name});
						this.$set(this.subList[this.currentPage-1], "org", arr);
					} else {
						this.$set(this.orgSub,'name', "");
						this.$set(this.orgSub,'code', "");
						this.$set(this.orgSub,'result', "");
						this.$set(this.subList[this.currentPage-1], "org", "");
					}
				}
				if(type == 'address'){
					if(arr instanceof Array){
						
						let fullName = [];
						let code = [];
						let result = [];
						
						arr.forEach((val, ind)=>{
							fullName.push(val.fullName)
							code.push(val.id)
							result.push({id:val.id, name:val.name, fullName:val.fullName})
						})
						this.$set(this.address,'name', fullName.join(","));
						this.$set(this.address,'code', code.join(","));
						this.$set(this.address,'result', result);
					} else if(arr instanceof Object){
						this.$set(this.address,'name', arr.fullName);
						this.$set(this.address,'code', arr.id);
						this.$set(this.address,'result', arr);
					} else {
						this.$set(this.address,'name', "");
						this.$set(this.address,'code', "");
						this.$set(this.address,'result', "");
					}
				}
				if(type == 'addressSub'){
					if(arr instanceof Array){
						
						let fullName = [];
						let code = [];
						let result = [];
						
						arr.forEach((val, ind)=>{
							fullName.push(val.fullName)
							code.push(val.id)
							result.push({id: val.id, name: val.name, fullName: val.fullName})
						})
						this.$set(this.addressSub,'name', fullName.join(","));
						this.$set(this.addressSub,'code', code.join(","));
						this.$set(this.addressSub,'result', result);
						this.$set(this.subList[this.currentPage-1], "address", arr);
					} else if(arr instanceof Object){
						this.$set(this.addressSub,'name', arr.fullName);
						this.$set(this.addressSub,'code', arr.id);
						this.$set(this.addressSub,'result', arr);
						this.$set(this.subList[this.currentPage-1], "address", arr);
					} else {
						this.$set(this.addressSub,'name', "");
						this.$set(this.addressSub,'code', "");
						this.$set(this.addressSub,'result', "");
						this.$set(this.subList[this.currentPage-1], "address", "");
					}
				}
			},
			// 列表确定选择
			listselectCallback(type, arr){
				if(type == "userList"){
					// 多选
					if(arr instanceof Array){
						let ids = []
						let names = []
						this.userlistChose = arr.concat([]);
						this.userlistChose.forEach((val,key)=>{
							names.push(val.userName)
							ids.push(val.id)
						})
						this.userlistChoseStr = ids.join(",");
						this.userlistChoseStrName = names.join(",");
						this.$set(this.subList[this.currentPage-1], "userList", this.userlistChose)
					// 单选
					} else {
						this.userlistChoseStr = arr.id || "";
						this.userlistChoseStrName = arr.userName || "";
						this.$set(this.subList[this.currentPage-1], "userList", {id: this.userlistChoseStr, name: this.userlistChoseStrName})
					}
					
				}
			},
			// 下一页
			pageDown(){
				if(this.currentPage == this.allPage){
					this.currentPage++;
					this.allPage++;
				} else {
					this.currentPage++;
				}
				this.refreshSub();
			},
			// 上一页
			pageUp(){
				if(this.currentPage != 1){
					this.currentPage--;
				} else {
					uni.showToast({
						title: '没有更多数据了',
						icon:"none"
					});
				}
				this.refreshSub();
			},
			// 删除元素
			delItem(){
				if(this.allPage == 1){
					this.TabCur = 0;
				}
				if(this.currentPage == this.allPage){
					this.currentPage--;
				}
				this.allPage--;
			},
			// 刷新子表数据
			refreshSub(){
				// 新建数据
				if(this.subList[this.currentPage-1] == null){
					this.testInputSub = "";
					this.testTextareaSub = "";
					this.testRadioSub = "";
					this.testCheckboxSub = "";
					this.testDateSub = dateUtils.getCurrentDate();
					this.testDateTimeSub = dateUtils.getCurrentDateTime();
					this.orgSub = {}
					this.userlistChose = []
					this.userlistChoseStr = "";
					this.userlistChoseStrName = "";
					this.userlistChoseStr = "";
					this.sRegion = ['广东省', '广州市', '海珠区'];
					this.addressSub = {};
					return;
				}
				// 刷新数据
				this.testInputSub = this.subList[this.currentPage-1].testInput;
				this.testTextareaSub = this.subList[this.currentPage-1].testTextarea;
				this.testRadioSub = this.subList[this.currentPage-1].testRadio;
				this.testCheckboxSub = this.subList[this.currentPage-1].testCheckbox;
				this.testDateSub = this.subList[this.currentPage-1].testDate;
				this.testDateTimeSub = this.subList[this.currentPage-1].testDateTime;
				// 用户处理
				if(this.subList[this.currentPage-1].userList instanceof Array){
					this.userlistChose = this.subList[this.currentPage-1].userList;
					let names = []
					let codes = []
					this.userlistChose.forEach((val, ind)=>{
						names.push(val.userName);
						codes.push(val.code)
					})
					this.userlistChoseStr = codes.join(",");
					this.userlistChoseStrName = names.join(",")
				} else if(this.subList[this.currentPage-1].userList instanceof Object){
					this.userlistChose = this.subList[this.currentPage-1].userList;
					this.userlistChoseStr = this.subList[this.currentPage-1].userList.id;
					this.userlistChoseStrName = this.subList[this.currentPage-1].userList.name;
				} 
				// 组织机构处理
				if(this.subList[this.currentPage-1].org instanceof Array){
					this.userlistChose = this.subList[this.currentPage-1].userList;
					let names = []
					let codes = []
					this.subList[this.currentPage-1].org.forEach((val, ind)=>{
						names.push(val.name);
						codes.push(val.code)
					})
					this.$set(this.orgSub, "code",  codes.join(","))
					this.$set(this.orgSub, "name", names.join(","))
				} else if(this.subList[this.currentPage-1].org instanceof Object){
					this.$set(this.orgSub, "code", this.subList[this.currentPage-1].org.code)
					this.$set(this.orgSub, "name", this.subList[this.currentPage-1].org.name)
					this.$set(this.orgSub, "result", this.subList[this.currentPage-1].org.result)
				} 
				// 地址处理
				if(this.subList[this.currentPage-1].address instanceof Array){
					this.userlistChose = this.subList[this.currentPage-1].address;
					let names = []
					let codes = []
					this.userlistChose.forEach((val, ind)=>{
						names.push(val.fullName);
						codes.push(val.id)
					})
					this.addressSub.code = codes.join(",");
					this.addressSub.name = names.join(",")
				} else if(this.subList[this.currentPage-1].address instanceof Object){
					this.addressSub.code = this.subList[this.currentPage-1].address.code;
					this.addressSub.name = this.subList[this.currentPage-1].address.fullName;
					this.addressSub.result = this.subList[this.currentPage-1].address.result;
				} 
			},
			// 子表
			subChange(event, key){
				if(this.subList.length == 0) return;
				if(typeof event == 'string'){
					return this.$set(this.subList[this.currentPage-1], key, event)
				}
				this.$set(this.subList[this.currentPage-1], key, event.target.value);
			},
			// 保存
			save(){
				console.log(this.subList)
				return;
				uni.showLoading({
					title: '保存中',
					mask: false
				});
				let submitData = {};
				submitData["testInput"] = this.testInput;
				submitData["testTextarea"] = this.testTextarea;
				submitData["testRadio"] = this.testRadio;
				submitData["testCheckbox"] = this.testCheckbox;
				submitData["testDatetime"] = this.testDate;
				submitData["testUser.userName"] = this.user.userName || "";
				submitData["testUser.userCode"] = this.user.userCode || "";
				submitData["testOffice.officeName"] = this.org.name || "";
				submitData["testOffice.officeCode"] = this.org.code || "";
				submitData["testAreaName"] = this.regionStr;
				submitData["testData_image"] = this.testData_image;
				submitData["testData_image_del"] = this.testData_image_del;
				submitData["testData_file"] = this.testData_file;
				submitData["testData_file_del"] = this.testData_file_del;
				this.JAjax({
					url: '/a/test/testData/save',
					data:submitData,
					header:{
					"content-type": "application/x-www-form-urlencoded"
					},
					method: "POST",
					success: data => {
						uni.hideLoading()
						if(data.data.result == "true"){
							uni.navigateBack({
								delta:1
							})
						} else {
							uni.showToast({
								title: data.data.message,
								icon:"none"
							});
						}
					}
				});
			}
		}
	}
</script>
<style scoped>
	#bottom{
		position: fixed;
		bottom: 2px;
		z-index: 100;
		width: 100%;
	}
	#save{
		position: fixed;
		bottom: 2px;
		z-index: 100;
		width: 100%;
	}
</style>